<template>
  <div class="container">
    <el-link @click="goback()" icon="el-icon-back" style="margin-bottom: 15px;">返回</el-link>
    <div class="main">
        <el-form class="form" :rules="rules" ref="form" :model="form" label-width="180px">
          <el-form-item label="账号" prop="account">
              <el-input class="inputs" v-model="form.account"></el-input>
          </el-form-item>
          <el-form-item label="员工姓名" prop="name">
            <el-input class="inputs" v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phoneNumber">
              <el-input class="inputs" v-model="form.phoneNumber"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="form.sex">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
              </el-radio-group>
            </el-form-item>
          <el-form-item label="身份证号" prop="idNumber">
              <el-input class="inputs" v-model="form.idNumber"></el-input>
          </el-form-item>
        </el-form>
        <el-divider></el-divider>
        <div class="footer">
            <el-button >取消</el-button>
            <el-button type="primary" @click="confirm()">保存</el-button>
            <el-button type="info">保存并继续添加</el-button>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    var checkPhone = (rule,value,callback)=>{
      var phoneRegex = /^1\d{10}$/;
      if(!phoneRegex.test(value)){
        callback(new Error('请输入正确的手机号'))
      }else{
        callback()
      }
    };
    var checkId = (rule,value,callback)=>{
      var idRegex = /^[1-9]\d{5}(18|19|20|21|22)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|[Xx])$/;
      if(!idRegex.test(value)){
        callback(new Error('请输入正确的手机号'))
      }else{
        callback()
      }
    };
    return {
      form:{
        account:'',
        name:'',
        phoneNumber:'',
        sex:'',
        idNumber:''
      },
      rules:{
        account:[
          { required: true, message: '请输入账号', trigger: 'blur' },
        ],
        name:[
          { required: true, message: '请输入姓名', trigger: 'blur' },
        ],
        phoneNumber:[
          { required: true, message: '请输入电话号码', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入11位手机号', trigger: 'blur' },
          {validator:checkPhone}
        ],
        idNumber:[
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          { min: 18, max: 18, message: '请输入18位身份证号', trigger: 'blur' },
          {validator:checkId}
        ],
        sex:[
          { required: true, message: '请选择性别', trigger: 'blur' },
        ]
      }
    };
  },
  methods: {
    goback(){
      this.$router.go(-1)
    },
    confirm(){
      this.$refs['form'].validate((valid) => {
        console.log(valid)
        if (valid) {
            alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  },
};
</script>

<style lang="scss" scoped>
  .container{
    width: 100%;
    height: 100vh;
    background-color: #F3F4F7;
    padding: 30px;
    .main{
      height: 500px;
      background-color: #FFF;
      padding: 30px;
      .inputs{
        width: 280px;
      }
    }
    .footer{
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
</style>
